<style>
</style>

<template>

  <div class="manage-wrap">
    <Card style="width:550px">
      <p slot="title">
        <Icon type="ios-build" />
        工作参数设置
      </p>
      <Tabs
        v-model="tabName"
        type="card"
        @on-click="tabChange"
      >
        <TabPane
          label="正常状态"
          name="name1"
        ></TabPane>
        <TabPane
          label="省电状态"
          name="name2"
        ></TabPane>
        <TabPane
          label="待修状态"
          name="name3"
        ></TabPane>
        <TabPane
          label="休眠状态"
          name="name4"
        ></TabPane>
      </Tabs>
      <Form
        ref="ConfigInfo"
        :model="ConfigInfo"
        :label-width="150"
        value=true
        style="padding:30px 40px 3px 10px"
      >
        <Form-item
          label="每日首次上报时间"
          prop="reportTime"
          :rules="{required: true, message: '必填,hhMM比如上午8点上报,0800', trigger:'blur',type:'string',pattern: /^\d{4}$/}"
        >
          <Input v-model="ConfigInfo.reportTime"></Input>
        </Form-item>
        <Form-item
          label="每日位置上报的间隔"
          prop="reportInterval"
          :rules="{required: true, message: '必填,整数', trigger:'blur',type:'integer'}"
        >
          <InputNumber
            :max="1440"
            :min="1"
            v-model="ConfigInfo.reportInterval"
            style="width:280px"
          ></InputNumber> 分钟
        </Form-item>

        <!-- <Form-item
          label="最近检修时间"
          prop="lastCheckTime"
          :rules="{required: true, message: '必填,YYMMDDhhmmss格式', trigger:'blur',type:'string',pattern: /^\d{12}$/}"
        >
          <Input v-model="ConfigInfo.lastCheckTime"></Input>
        </Form-item>
        <Form-item
          label="工作状态"
          prop="workStatus"
          :rules="{required: true, message: '必填', trigger:'change',type:'number'}"
        >
          <Select v-model="ConfigInfo.workStatus">
            <Option
              v-for="item in workStatusList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item
          label="合计检修次数"
          prop="checkTimes"
          :rules="{required: true, message: '必填,整数', trigger:'blur',type:'number',pattern:/^\d+$/}"
        >
          <Input v-model="ConfigInfo.checkTimes"></Input>
        </Form-item> -->
        <Form-item
          label="指示灯工作时段"
          prop="lampWorkPeriod"
          :rules="{required: true, message: '必填,00:00-07:12格式', trigger:'blur',type:'string',pattern: /^([01][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?-([01][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/}"
        >
          <Input v-model="ConfigInfo.lampWorkPeriod"></Input>
        </Form-item>
        <Form-item
          label="指示灯首次工作时间"
          prop="lampFirstTime"
          :rules="{required: true, message: '必填,06:00格式', trigger:'blur',type:'string',pattern:/^([01][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/}"
        >
          <Input v-model="ConfigInfo.lampFirstTime"></Input>
        </Form-item>
        <Form-item
          label="指示灯工作占比"
          prop="lampWorkPercent"
          :rules="{required: true, message: '必填,0到100', trigger:'blur',type:'string',pattern:/^100$|^(\d|[1-9]\d)$/}"
        >
          <Input v-model="ConfigInfo.lampWorkPercent"  style="width:280px"></Input> %
        </Form-item>
        <Form-item
          label="指示灯休眠间隔时间"
          prop="lampSleepInterval"
          :rules="{required: true, message: '必填', trigger:'blur',type:'integer'}"
        >
          <InputNumber
            :min="1"
            v-model="ConfigInfo.lampSleepInterval"
             style="width:280px"
          ></InputNumber> 分钟
        </Form-item>
         <Form-item
          label="定位截止时间"
          prop="searchLocationTime"
          :rules="{required: true, message: '必填', trigger:'blur',type:'integer'}"
        >
          <InputNumber
            :min="1"
            v-model="ConfigInfo.searchLocationTime"
             style="width:280px"
          ></InputNumber> 分钟
        </Form-item>
        <FormItem>
          <Button
            type="primary"
            :loading="loading"
            @click="saveForm('ConfigInfo')"
            v-perms="'bss:setting:info'"
          >提交</Button>
        </FormItem>
      </Form>
    </Card>

  </div>

</template>

<script>
import { paramConfigInfo, updateParamConfig } from "@/api/operate";
export default {
  data() {
    return {
      ConfigInfo: {},
      workStatusList: [
        { label: "正常状态", value: 1 },
        { label: "省电状态", value: 2 },
        { label: "待修状态", value: 3 },
        { label: "休眠状态", value: 4 }
      ],
      loading: false,
      tabName: "name1"
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.paramConfigInfo();
  },
  methods: {
    async paramConfigInfo() {
      let paramsId = 1;
      if (this.tabName == "name1") {
        paramsId = 1;
      } else if (this.tabName == "name2") {
        paramsId = 2;
      } else if (this.tabName == "name3") {
        paramsId = 3;
      } else if (this.tabName == "name4") {
        paramsId = 4;
      }
      const result = await paramConfigInfo({ id: paramsId });
      if (result.code == 0) {
        console.log(result.data);
        this.ConfigInfo = result.data;
      }
    },
    tabChange(name) {
      this.paramConfigInfo();
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.loading = true;
          let params = JSON.parse(JSON.stringify(this.ConfigInfo));

          try {
            let result = await updateParamConfig(params);

            if (result.code == "0") {
              this.$Message.success("提交成功!");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (e) {
            this.$Message.error("服务器异常，稍后再试");
          }
          this.loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
